import {createRouter, createWebHashHistory} from 'vue-router'

const routes = [
    {
        path: '/',
        component: () => import('../views/HomeView.vue'),
        redirect: '/index',
        children: [
            {
                path: '/index',
                component: () => import('../views/IndexView.vue')
            },
            {
                path: '/short_rent',
                component: () => import('../views/ShortRentView.vue')
            },
            {
                path: '/long_rent',
                component: () => import('../views/LongRentView.vue')
            },
            {
                path: '/car_owner',
                component: () => import('../views/CarOwnerView.vue')
            },
            {
                path: '/searchBy/categoryId/:id',
                name: 'searchByCategoryId',
                component: () => import('../views/NewsByCategoryIdView.vue')
            },
            {
                path: '/searchBy/keyword/:keyword',
                name: 'searchByKeyword',
                component: () => import('../views/NewsByKeywordView.vue')

            },
            {
                path: '/center',
                component: () => import('../views/PersonalCenterView.vue'),
                redirect: '/center/home',
                children: [

                    {
                        path: '/center/userInfo',
                        component: () => import('../views/personalCenterComponents/UserInfoView.vue')
                    },
                    {
                        path: '/center/home',
                        component: () => import('../views/personalCenterComponents/HomeView.vue')
                    },
                    {
                        path: '/center/order',
                        component: () => import('../views/personalCenterComponents/OrderView.vue')
                    },
                    {
                        path: '/center/wallet',
                        component: () => import('../views/personalCenterComponents/WalletView.vue')
                    },
                    {
                        path: '/center/transactionHistory',
                        component: () => import('../views/personalCenterComponents/TransactionHistoryView.vue')
                    },
                    {
                        path: '/center/authentication',
                        component: () => import('../views/personalCenterComponents/AuthenticationView.vue')
                    },
                    {
                        path: '/center/driverlicense',
                        component: () => import('../views/personalCenterComponents/DriverLicenseView.vue')
                    }





                ]
            },
            {
                path: '/enterprise',
                component: () => import('../views/EnterpriseRentView.vue')
            },
            {
                path: '/about',
                component: () => import('../views/AboutUs.vue'),
                children: [
                    {path: 'knowUs', component: () => import(/* webpackChunkName: "about" */ '../views/About/KnowUs.vue')},
                    {path: 'milestone', component: () => import(/* webpackChunkName: "about" */ '../views/About/Milestone.vue')},
                    {path: 'mediaReport', component: () => import(/* webpackChunkName: "about" */ '../views/About/MediaReport.vue')},
                    {path: 'rule', component: () => import(/* webpackChunkName: "about" */ '../views/About/Rule.vue')},
                    {path: 'leasingProcedures', component: () => import(/* webpackChunkName: "about" */ '../views/About/LeasingProcedures.vue')},
                    {path: 'insuranceClauses', component: () => import(/* webpackChunkName: "about" */ '../views/About/InsuranceClauses.vue')},
                    {path: 'ownersResAndIegal', component: () => import(/* webpackChunkName: "about" */ '../views/About/OwnersResAndIegal.vue')},
                    {path: 'vipServiceWeb', component: () => import(/* webpackChunkName: "about" */ '../views/About/VipServiceWeb.vue')},
                    {path: 'privacyPolicy', component: () => import(/* webpackChunkName: "about" */ '../views/About/PrivacyPolicy.vue')},
                ]
            },
            {
                path: '/signup',
                component: () => import('../views/SignupView.vue')
            },
            {
                path: '/login',
                component: () => import('../views/LoginView.vue')

            },

            {
                path: '/long_rent/detail',
                component: () => import('../views/LongRentDetailView.vue')
            },
            {
                path: '/topic',
                component: () => import('../views/Topic.vue')
            },
            {
                path: '/topic/:id',
                component: () => import('../views/TopicDetailView.vue')
            },
            {
                path: '/newsDetail/:id',
                component: () => import('../views/NewsDetailView.vue'),
                props: true  // 将路由参数作为组件的 props 传递
            },
            {
                path: '/car_rental_contract',
                component: () => import('../views/CarRentalContractView.vue')
            },
            {
                path: '/payment',
                component: () => import('../views/PaymentView.vue')
            }

        ]
    },
]

const router = createRouter({
    history: createWebHashHistory(),
    routes,
    scrollBehavior: () => {
        return {top: 0}
    }
})

// 免登录白名单
const whiteList = ['/login', '/403', '/404', '/500','/index','/short_rent','/long_rent', '/car_owner', '/byCategoryId/:id','/enterprise','/about','/signup','/long_rent/detail','/topic',/^\/topic\/\d+$/, '/newsDetail/:id', '/car_rental_contract','/news']

// 路由导航前置守卫
router.beforeEach(async (to, from, next) => {
    // 设置页面标题
    document.title = to.meta.title || '凹凸租车'
    // 判断是否登录
    if (!localStorage.getItem('token')) {
        // 在免登录白名单中的直接放行，其它的重定向到登录页面

        if (whiteList.some(pattern => typeof pattern === 'string' ? to.path === pattern : pattern.test(to.path))) {
            next();
        } else {
            next(`/login?redirect=${to.path}`);
        }
        return;
        // whiteList.includes(to.path) ? next() : next(`/login?redirect=${to.path}`)
        // return
    }
    // 如果没有找到匹配的路由，转到404页面，否则直接进入
    to.matched.length === 0 ? next('/404') : next()
})


export default router
